<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>会员页面</title>
    <!--公共css与js文件-->
    <th:block th:include="front/common/common_resource::resources"/>
    <script src="../../static/js/front/vip.js" th:src="@{/js/front/vip.js}"></script>
</head>
<body>
<!-- 导航栏 -->
<th:block th:include="front/common/header::nav"/>
<!--<input th:value="${session.user.vip}">-->
<!--<input th:value="${session.user.id}">-->

<div class="grid_3x">
    <div class="container">
        <div class="row text-center"><img th:src="@{/images/member_img.png}" src="../../static/images/member_img.png">
        </div>
        <div class="services">
            <div class="page_header">
                <h1>开通会员</h1>
                <h3>4项特权，总有一项帮到您！</h3>
                <p>1、尊享VIP特殊标识，助你寻爱；</p>
                <p>2、购买的服务仅限本账号使用，不能转移到其他账号；</p>
                <p>3、在使用本服务期间，若从事不恰当或不合法的行为，牵手网保留进行调查并立即终止服务的权利；</p>
                <p>4、对于本服务和以上条款，在法律允许范围内牵手网拥有最终解释权。</p>
            </div>
        </div>
    </div>
</div>
<div class="about_middle1">
    <div class="container">
        <h2>星级会员&nbsp;&nbsp;&amp;&nbsp;&nbsp;VIP会员</h2>
        <div class="about_middle-grid1">
            <div class="col-sm-6 testi_grid list-item-0">
                <blockquote class="testi_grid_blockquote">
                    <figure class="featured-thumbnail">
                        <img th:src="@{/images/a1.jpg}" src="../../static/images/a1.jpg" class="img-responsive" alt=""/>
                    </figure>
                    <div><a href="#">【开通星级用户（52.1/天）】您开通此项权限之后，您的信息将优先展示在与你最匹配的另一半的用户列表界面，让他（她）更快的寻找到您，让缘分来得更快更准！</a>
                        <div class="clearfix"></div>
                    </div>
                </blockquote>

                    <small class="testi-meta">
                        <button class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal"
                                style="color: orangered" >
                            <th:block th:if="${session.user.star  == true}">续费星级会员</th:block>
                            <th:block th:if="${session.user.star  == false}">开通星级会员</th:block>
                        </button>
                    </small>

            </div>
            <div class="col-sm-6 testi_grid list-item-1">
                <blockquote class="testi_grid_blockquote">
                    <figure class="featured-thumbnail">
                        <img th:src="@{/images/a2.jpg}" src="../../static/images/a2.jpg" class="img-responsive" alt=""/>
                    </figure>
                    <div><a href="#">【VIP会员1个月（52.1元）】您开通此项权限之后，您的信息将优先展示在与你最匹配的另一半的用户列表界面，让他（她）更快的寻找到您，让缘分来得更快更准！</a>
                        <div class="clearfix"></div>
                    </div>
                </blockquote>
                <small class="testi-meta1">

                        <button id="modal1" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal2"
                                style="color: orangered">
                            <th:block th:if="${session.user.vip == false}">开通VIP会员</th:block>
                            <th:block th:if="${session.user.vip == true}">续费VIP会员</th:block>
                        </button>

                </small>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="about_middle-grid2">
            <div class="col-sm-6 testi_grid list-item-0">
                <blockquote class="testi_grid_blockquote">
                    <figure class="featured-thumbnail">
                        <img th:src="@{/images/a1.jpg}" src="../../static/images/a1.jpg" class="img-responsive" alt=""/>
                    </figure>
                    <div><a href="#">【VIP会员3个月（138.1元）】您开通此项权限之后，您的信息将优先展示在与你最匹配的另一半的用户列表界面，让他（她）更快的寻找到您，让缘分来得更快更准！</a>
                        <div class="clearfix"></div>
                    </div>
                </blockquote>
                <small class="testi-meta">
                    <button id="modal2" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal2"
                            style="color: orangered">
                        <th:block th:if="${session.user.vip == false}">开通VIP会员</th:block>
                        <th:block th:if="${session.user.vip == true}">续费VIP会员</th:block>
                    </button>
                </small>
            </div>
            <div class="col-sm-6 testi_grid list-item-1">
                <blockquote class="testi_grid_blockquote">
                    <figure class="featured-thumbnail">
                        <img th:src="@{/images/a2.jpg}" src="../../static/images/a2.jpg" class="img-responsive" alt=""/>
                    </figure>
                    <div><a href="#">【VIP会员1年（521.0元）】您开通此项权限之后，您的信息将优先展示在与你最匹配的另一半的用户列表界面，让他（她）更快的寻找到您，让缘分来得更快更准！</a>
                        <div class="clearfix"></div>
                    </div>
                </blockquote>
                <small class="testi-meta1">
                    <button id="modal3" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal2"
                            style="color: orangered">
                        <th:block th:if="${session.user.vip == false}">开通VIP会员</th:block>
                        <th:block th:if="${session.user.vip == true}">续费VIP会员</th:block>
                    </button>
                </small>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>


<!-- 开通星级会员 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal reg-form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请选择付款方式</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="starBuyWay" class="col-md-5 control-label">付费方式</label>
                        <div class="col-md-3">
                            <select name="starBuyWay" id="starBuyWay" class="form-control">
                                <option value="支付宝">支付宝</option>
                                <option value="牵手币">牵手币</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="starBuyDay" class="col-md-5 control-label">选择购买天数</label>
                        <div class="col-md-3">
                            <select name="starBuyDay" id="starBuyDay" class="form-control">
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="starBuyMoney" class="col-md-5 control-label">总计</label>
                        <div class="col-md-3">
                            <input type="text" class="form-text" id="starBuyMoney" name="starBuyMoney" readonly>
                        </div>
                    </div>
                    <!--用支付宝进行付款-->
                    <div id="moneyPayStar">
                        <div style="height: 120px;text-align: center">
                            <img th:src="@{/images/QRCode.jpg}" src="../../static/images/QRCode.jpg"
                                 style="height: 120px;text-align: center">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="starSubmit" type="button" class="btn btn-primary" data-dismiss="modal">我已完成购买
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 开通VIP会员 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal ">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModal2Label">请选择付款方式</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="VIPBuyWay" class="col-md-5 control-label">付费方式</label>
                        <div class="col-md-3">
                            <select name="VIPBuyWay" id="VIPBuyWay" class="form-control">
                                <option value="支付宝">支付宝</option>
                                <option value="牵手币">牵手币</option>
                            </select>
                        </div>
                    </div>
                    <!--用牵手币进行付款-->
                    <div id="loverPay">
                        <div class="form-group">
                            <label for="VIPBuyDay" class="col-md-5 control-label">选择购买天数</label>
                            <div class="col-md-3">
                                <select name="VIPBuyDay" id="VIPBuyDayLover" class="form-control">
                                    <option value="1">一个月</option>
                                    <option value="3">三个月</option>
                                    <option value="12">一年</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="VIPBuyMoney" class="col-md-5 control-label">总计</label>
                            <div class="col-md-3">
                                <input type="text" class="form-text" id="VIPBuyMoneyLover" name="VIPBuyMoney" readonly>
                            </div>
                        </div>
                    </div>
                    <!--用支付宝进行付款-->
                    <div id="moneyPay">
                        <div class="form-group">
                            <label for="VIPBuyDay" class="col-md-5 control-label">选择购买天数</label>
                            <div class="col-md-3">
                                <select name="VIPBuyDay" id="VIPBuyDay" class="form-control">
                                    <option value="1">一个月</option>
                                    <option value="3">三个月</option>
                                    <option value="12">一年</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="VIPBuyMoney" class="col-md-5 control-label">总计</label>
                            <div class="col-md-3">
                                <input type="text" class="form-text" id="VIPBuyMoney" name="VIPBuyMoney" readonly>
                            </div>
                        </div>
                        <div style="height: 120px;text-align: center">
                            <img th:src="@{/images/QRCode.jpg}" src="../../static/images/QRCode.jpg"
                                 style="height: 120px;text-align: center">
                        </div>
                    </div>
                </div>
                <div class="modal-footer" id="VIPSubmitDiv">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="VIPSubmit" type="button" class="btn btn-primary" data-dismiss="modal">
                        我已完成购买
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<th:block th:include="front/common/footer::foot"/>
</body>
</html>	